<template>
	<view :style="{margin: value.marginTop + 'px '+ value.padding * 2 + 'rpx'}">
		<view class="">
			<scroll-view scroll-x="true" :scroll-into-view="'a' + cateIndex">
				<view
					v-for="(item, index) in value.list"
					class="scroll-item"
					:class="{'active': index == cateIndex}"
					:id="'a' + index"
					:key="index"
					@click="changeCateIndex(item, index)"
				>
					<view class="item-wrap">
						<view class="split-line" v-if="index > 0"></view>
						<view class="cate">
							<view class="name" :style="{color: index == cateIndex ? value.nsSelectColor : ''}">
								{{ item.title }}
								<!-- 排序箭头 - 只有允许排序的项才显示 -->
								<view v-if="sortStatusMap[index]!= null"  class="sort-arrow" 
								      :class="{
									      'active': index == cateIndex && sortStatusMap[index] !== null,
									      'asc': sortStatusMap[index] === 'asc',
									      'desc': sortStatusMap[index] === 'desc'
								      }">
									↑
								</view>
							</view>
							<view class="desc" :style="{background: index == cateIndex && item.desc ? value.selectColor : ''}">{{ item.desc }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- <diy-goods-list v-if="goodsValue" :value="goodsValue"></diy-goods-list> -->
	</view>
</template>

<script>
	import globalConfig from '@/common/js/golbalConfig.js';
	import diyGoodsList from '@/components/diy-goods-list/diy-goods-list.vue';

	export default {
		name: 'diy-many-goods-list',
		components: {
			diyGoodsList
		},
		props: {
			value: {
				type: Object,
				default: () => {
					return {};
				}
			},
			diyData: {},
			position: {
				type: Number,
				default: -1
			}
		},
		data() {
			return {
				cartList: [],

				cateIndex: 0, // 当前选中的分类索引
				categoryId: -1, // 当前分类id，来源为'category'时
				goodsIdArr: [], // 当前分类下的商品id集合，来源为'diy'时
				
				goodsValue: {}, // 商品列表数据
				isGroupChange: 0, // 切换菜分类改变
				
				// 排序状态管理：改为对象存储每个索引的排序状态，键为索引，值为null|'asc'|'desc'
				sortStatusMap: [],
				// 记录上一次选中的索引
				lastCateIndex: -1
			};
		},
		mixins: [globalConfig],
		created() {			
			if (this.value.list && this.value.list[0]) {
				if (this.value.list[0].sources == 'category') {
					this.categoryId = this.value.list[0].categoryId;
					this.goodsIdArr = [];
				} else {
					this.goodsIdArr = this.value.list[0].goodsId;
					this.categoryId = -1;
				}
				
				// 初始化排序状态映射
				this.value.list.forEach((item, index) => {
					if (index == 1){
						this.sortStatusMap[index] = 'desc';
					}else{
						this.sortStatusMap[index] = item.allowSort == true ? 'desc' : null;
					}
				});
				
				console.log(this.sortStatusMap);
			}
		},
		methods: {
			// 切换分类并处理排序
			changeCateIndex(item, index) {
				this.lastCateIndex = this.cateIndex;
				this.cateIndex = index;
				
				this.isGroupChange = this.isGroupChange == 0 ? 1 : 0;
				this.$store.commit('setIsGoodsGroupChange', this.cateIndex);
				this.$store.commit('setGroupTitle', this.value.title);
				
				if (item.sources == 'category') {
					this.categoryId = item.categoryId;
					this.goodsIdArr = [];
				} else {
					this.goodsIdArr = item.goodsId;
					this.categoryId = -1;
				}
				
				if (this.sortStatusMap[index] != null){
				  this.sortStatusMap[index] = this.sortStatusMap[index] === 'asc' ? 'desc' : 'asc';
				  this.handleSort(item, index, this.sortStatusMap[index]);
				}else{
				  this.handleSort(item, index, null);
				}
			},
			
			// 处理排序逻辑
			handleSort(item, index, sortType) {
				// 实际项目中这里会根据排序类型对商品列表进行排序
				this.$emit('sortChange', {
					item,
					index,
					sortType
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.scroll-cate {
		margin: 0 -30rpx;
	}
	
	scroll-view {
		width: 100%;
		white-space: nowrap;
		box-sizing: border-box;
		padding: 40rpx 0;
		
		.scroll-item {
			display: inline-block;
			text-align: center;
			vertical-align: top;
			// 防止点击时的位移
			-webkit-tap-highlight-color: transparent;
			touch-action: manipulation; // 优化触摸体验
			
			.item-wrap {
				display: flex;
				align-items: center;
			}
			
			.split-line {
				display: inline-block;
				width: 1rpx;
				height: 30rpx;
				background-color: #E5E5E5;
				margin: 0 35rpx;
			}
			
			&.active {
				.name {
					font-weight: bold;
				}
				
				.desc {
					color: #FFFFFF;
					border-radius: 20rpx;
				}
			}
			
			.name {
				font-size: 32rpx;
				color: $color-title;
				line-height: 1;
				display: inline-flex;
				align-items: center;
				// 固定高度和宽度防止文字位移
				height: 40rpx;
				
				// 排序箭头样式
				.sort-arrow {
					font-size: 20rpx;
					color: black;
					margin-left: 8rpx;
					transition: transform 0.2s ease;
					transform-origin: center;
					// 固定尺寸防止布局偏移
					width: 20rpx;
					height: 20rpx;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					
					// 默认显示为向下排序（旋转180度）
					transform: rotate(180deg);
					
					&.asc {
						// 升序时不旋转（显示向上）
						transform: rotate(0deg);
					}
					
					&.desc {
						// 降序时旋转180度（显示向下）
						transform: rotate(180deg);
					}
				}
			}
			
			.desc {
				font-size: $font-size-tag;
				color: $color-tip;
				height: 36rpx;
				line-height: 36rpx;
				margin-top: 10rpx;
			}
		}
	}
</style>
